<template>
<div id="gameNav">
  <el-menu default-active="" :default-openeds='defaultOpen' class="el-menu-vertical-demo side-nav" router>
    <el-menu-item index="/hall/list" class='nav-son'>
      <i class="el-icon-menu"></i>
      <span slot="title">彩票大厅</span>
    </el-menu-item>
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-star-on"></i>
        <span>热门彩种</span>
      </template>
      <el-menu-item v-for="(item,index) in gaoList" :index="item.path" :key="index">{{item.ticketName}}</el-menu-item>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-star-off"></i>
        <span>低频彩</span>
      </template>
      <el-menu-item v-for="(item,index) in diList" :index="item.path" :key="index">{{item.ticketName}}</el-menu-item>
    </el-submenu>

  </el-menu>
</div>
</template>

<script>
  export default {
    data () {
      return {
      	defaultOpen: ["1"]
      }
    },
    created () {
      let navObj
      let qwer = JSON.parse(sessionStorage.getItem('hallLeftNav'))
      let hallLeftNav = this.$store.state.hallLeftNav

      if (!hallLeftNav.diList && qwer) {
        this.$store.commit('c_hallLeftNav',qwer)
      }

    },
    computed: {
      gaoList () {
        return this.$store.state.hallLeftNav.gaoList
      },
      diList () {
        return this.$store.state.hallLeftNav.diList
      }
    },
    methods: {},
    computed: {
    	gaoList() {
    		return this.$store.state.hallLeftNav.gaoList
    	},
    	diList() {
    		return this.$store.state.hallLeftNav.diList
    	}
    }

  }
</script>

<style lang="less">
#gameNav{
  .el-menu-item, .el-submenu__title {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e7e7e7;
  }
  .el-submenu__title{
    background-color: #e7e7e7;
    border-bottom: 1px solid black;
  }
  .el-menu-vertical-demo > li:first-child {
    background-color: #e7e7e7;
    border-bottom: 1px solid black;
  }
}
</style>

